<template>
	<div class="recommend">
		<div class="home_body_banner">
			<swiper :options="swiperOption" v-if='picture.length!=1'>
				<swiper-slide v-for="(slide, key) in picture" :key="key"><a><img :src='slide.l_img'></a></swiper-slide>
				<div class="swiper-pagination" slot="pagination"></div>
			</swiper>
			<div class="home_body_banner_top">
				<span @click.stop="TopClick">
					区域&nbsp;<i class="el-icon-caret-bottom"></i>
				</span>
				<div @click.stop="TopClick">
					<img  src="../../../../static/img/images/sao.png" />
				</div>
			</div>
		</div>
		<img src="../../../../static/img/images/tong.jpg" style="width: 100%;display: block;" />
		
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	import vFooter from '../../common/footer.vue';
	require('swiper/dist/css/swiper.css');
	import { swiper, swiperSlide } from 'vue-awesome-swiper'
	export default {
		components:{
            vFooter,
            swiper,
			swiperSlide
        },
		data: function() {
			
			return {
				picture:[{
					'l_img':'../../../../static/img/images/l01.png'
				},{
					'l_img':'../../../../static/img/images/l02.png'
				},{
					'l_img':'../../../../static/img/images/l03.png'
				}],
				swiperOption: {
					autoplay: 5000,
					initialSlide: 1,
					loop: true,
					pagination: '.swiper-pagination',
					onSlideChangeEnd: swiper => {
						//						console.log('onSlideChangeEnd', swiper.realIndex)
					},
				},
				
			}
		},
		mounted() {
        	
		},
		methods: {
			TopClick(){
				Toast('暂未开放，敬请期待')
			},
			
		}
	}
</script>

<style scoped>
	.recommend_top{
		width: 95%;
		margin: 0 auto;
		overflow: hidden;
	}
	.recommend_top_title{
		width: 100%;
		font-size: 1.6rem;
		border-left: 0.6rem solid #000;
		color: #000;
		padding-left: 1rem;
		line-height: 1.6rem;
		height: 1.6rem;
		margin: 1.5rem 0;
		
	}
	.recommend_top_body{
		overflow: auto;
		width: 100%;
	}
	.recommend_top_body2{
	}
	.recommend_top_img{
		float: left;
		box-sizing: border-box;
		border: 1px solid #000;
	}
	.recommend_top_img:nth-last-child(1){
		margin: 0;
	}
	.recommend_top_img img{
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.recommend_ss{
		width: 95%;
		padding: 0.8rem 2.5%;
		background: #000;
		
	}
	.recommend_ss_input{
		float: left;
		width: 50%;
		background: #fff;
		height: 2.9rem;
		border-radius: 3rem;
		overflow: hidden;
	}
	.recommend_ss_input input{
		height: 2.9rem;
		text-indent: 10%;
		width: 80%;
		border: 0;
		font-size: 1.4rem;
		line-height: 2.9rem;
	}
	.recommend_ss_input i{
		font-size: 1.5rem;
		line-height: 2.9rem;
		float: right;
		margin-right: 7%;
	}
	.recommend_ss_leimu{
		font-size: 1.4rem;
		color: #fff;
		margin-left: 1.7rem;
		line-height: 2.9rem;
	}
	
	.recommend_ss_guan{
		clear: both;
		width: 100%;
		overflow: auto;
		
	}
	.recommend_ss_guan2{
		white-space: nowrap;
	}
	.recommend_ss_span{
		font-size: 1.6rem;
		color: #fff;
		display: inline-block;
		padding: 1.5rem 1rem;
	}
	.recommend_ss_spanactive{
		color: #edb53e;
	}
	.recommend_body{
		width: 95%;
		margin: 0 auto;
		margin-top: 0.8rem;
	}
	.recommend_body_top{
		width: 100%;
		text-align: center;
		font-size: 1.2rem;
		color: #808080;
	}
	.recommend_body_top span{
		color: #ccc;
	}
	.body_bac{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: rgba(0,0,0,0.5);
	}
	.body_leimu{
		width: 50%;
		position: fixed;
		top: 0;
		right: 0;
		background: #fff;
		z-index: 2;
		transform: translate(100%,0);
		transition: transform 0.3s;
	}
	.body_leimu img{
		width: 100%;
		display: block;
	}
	.in{
		transform: translate(0,0);
	}
	.home_body_banner{
		width: 100%;
		background: #b5b5b5;
		font-size: 3rem;
		text-align: center;
		font-weight: bold;
		position: relative;
	}
	.home_body_banner img{
		width: 100%;
		display: block;
	}
	.home_body_banner_top{
		position: absolute;
		top: 1rem;
		left: 3.2%;
		width: 93.6%;
		height: 2.5rem;
		z-index: 1;
	}
	.home_body_banner_top span{
		float: left;
		font-size: 1.6rem;
		color: #fff;
		line-height: 2.5rem;
	}
	.home_body_banner_top i{
		font-size: 1.4rem;
	}
	.home_body_banner_top div{
		float: right;
	}
	.home_body_banner_top img{
		height: 2.3rem;
		margin: 0.1rem 0;
		display: block;
		float: right;
		width: 2.3rem;
	}
	
</style>
<style>
	.home_body_banner .swiper-pagination{
		bottom: 0 !important;
	}
	
	.home_body_banner .swiper-pagination-bullet{
		background: #fff;
		opacity: 1;
	}
	.home_body_banner .swiper-pagination-bullet-active{
		background: rgb(247, 189, 64);
	}
</style>